<template>
  <div>
    <van-sticky>
      <van-nav-bar title="文章管理" left-arrow @click-left='backOff' />
    </van-sticky>
    <!-- 新增按钮 -->
    <van-row>
      <van-col span='24'>
        <van-button size='large' type="primary" text="显示遮罩层" @click="addArticle">新增</van-button>
      </van-col>
    </van-row>
    <!-- 展示内容 -->
    <van-row>
      <van-col span='24'>
        <!-- 折叠面板, 可以通过 van-collapse 的 v-model 绑定来控制默认显示 -->
        <van-collapse v-model="activeNames">
          <van-collapse-item v-for="(item, index) in articleList" :title="item.title" :name="index" :key="index">
            <!-- 单元格 -->
            <van-cell-group>
              <van-cell title='封面'>
                <img src="../../assets/img/logo.png">
              </van-cell>
              <van-cell title='栏目' :value='item.cid' />
              <van-cell title='作者' :value='item.author' />
              <van-cell title='是否发布' :value="item.show == 1 ? '是' : '否'" />
              <van-cell title='阅读量' :value='item.views' />
              <van-cell title='简介' :value='item.synopsis' />
              <van-cell title='是否付费' :value="item.isPay == 1 ? '是' : '否'" />
              <van-cell title='价格' :value='item.price' />
              <van-cell title='创建时间' :value='item.created_at' />
              <van-cell>
                <template #title>
                  <van-button type='info' @click="updateArt(item)" size='small'>编辑</van-button>
                </template>
                <van-button type='warning' @click='delArtItem(item.id)' size='small'>删除</van-button>
              </van-cell>
            </van-cell-group>
          </van-collapse-item>
        </van-collapse>
      </van-col>
    </van-row>
    <!-- 弹出层 -->
    <van-popup v-model="popupShow" round position="bottom" :style="{ height: '80%' }" >
      <van-form @submit="onSubmit">
        <van-field
          v-model="artId"
          name="id"
          label="文章ID"
          placeholder="文章ID"
          disabled
        />
        <van-field
          v-model="cid"
          name="cid"
          label="栏目ID"
          placeholder="栏目ID"
        />
        <van-field
          v-model="title"
          name="title"
          label="书名"
          placeholder="书名"
        />
        <van-field
          v-model="author"
          name="author"
          label="作者"
          placeholder="作者"
        />
        <van-field name="image" label="文件上传">
          <template #input>
            <van-uploader v-model="image" />
          </template>
        </van-field>
        <van-field name="show" label="是否发布" input-align="right">
          <template #input>
            <van-switch v-model="show" size="20" />
          </template>
        </van-field>
        <van-field
          v-model="views"
          name="views"
          label="阅读量"
          placeholder="阅读量"
        />
        <van-field
          v-model="synopsis"
          name='synopsis'
          rows="2"
          autosize
          label="简介"
          type="textarea"
          placeholder="简介"
          maxlength="50"
          show-word-limit
        />
        <van-field name="isPay" label="是否付费" input-align="right">
          <template #input>
            <van-switch v-model="isPay" size="20" />
          </template>
        </van-field>
        <van-field
          v-model="price"
          name="price"
          label="价格"
          placeholder="价格"
        />
        <!-- <van-field name="content" label="内容上传">
          <template #input>
            <van-uploader v-model='content'>
              <van-button size='small' icon="plus" type="primary">上传文件</van-button>
            </van-uploader>
          </template>
        </van-field> -->
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import { request } from 'network/request'

export default {
  name: 'Article',
  created() {
    this.getArticleDate()
  },
  data() {
    return {
      // 决定弹出层的显示
      popupShow: false,
      // 
      artId: '',
      cid: '',
      title: '',
      author: '',
      image: [],
      show: true,
      views: 0,
      synopsis: '',
      isPay: false,
      price: 0,
      content: '',
      // 文章列表
      articleList: [],
      // activeNames -> 设置默认打开的折叠面板
      activeNames: [],
      // 决定是增加还是修改
      flag: true
    }
  },
  methods: {
    // 获取文章表中的数据
    getArticleDate() {
      request({
        url: 'article/data',
        method: 'post'
      }).then((res) => {
        this.articleList = res.data
      }).catch(err => console.log(err))
    },
    backOff() {
      this.$router.go(-1)
    },
    // 添加事件
    addArticle() {
      this.artId = ''
      this.cid = ''
      this.title = ''
      this.author = ''
      this.image = []
      this.show = true
      this.views = 0
      this.synopsis = ''
      this.isPay = true
      this.price = 0
      this.content = []
      this.popupShow = true
      this.flag = false
    },
    // 弹出层提交事件
    onSubmit(values) {
      // console.log(values)
      this.popupShow = false
      if(this.flag) {
        // 修改效果
        request({
          url: 'article/updateArt',
          method: 'post',
          params: {
            id: values['id'],
            cid: values['cid'],
            title: values['title'],
            author: values['author'],
            image: 'Api to be tested',
            show: values['show'] ? 1 : 0,
            views: values['views'],
            synopsis: values['synopsis'],
            isPay: values['isPay'] ? 1: 0,
            price: values['price'],
            content: values['content']
          }
        }).then(() => {this.getArticleDate()})
        .catch(err => console.log(err))
      } else {
        // 增加效果
        request({
          url: 'article/addArt',
          method: 'post',
          params: {
            cid: values['cid'],
            title: values['title'],
            author: values['author'],
            image: 'Api to be tested',
            show: values['show'] ? 1 : 0,
            views: values['views'],
            synopsis: values['synopsis'],
            isPay: values['isPay'] ? 1 : 0,
            price: values['price'],
            content: values['content']
          }
        }).then(() => {
          this.getArticleDate()
        }).catch(err => console.log(err))
        this.flag = true
      }
    },
    // 更新文章的数据
    updateArt(item) {
      this.artId = item.id
      this.cid = item.cid
      this.title = item.title
      this.author = item.author
      this.image = []
      this.show = item.show == 1 ? true : false
      this.views = item.views
      this.synopsis = item.synopsis
      this.isPay = item.isPay == 1 ? true : false
      this.price = item.price
      this.content = item.content
      this.popupShow = true
    },
    // 删除该文章
    delArtItem(id) {
      this.$dialog.confirm({
        message: '是否删除该栏目',
      }).then(() => {
        request({
          url: 'article/delArt',
          method: 'post',
          params: {
            id
          }
        }).then(() => {this.getArticleDate()})
        .catch(err => console.log(err))
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped>
/* @import url(); 引入css类 */
img {
  height: 80px;
  width: 80px;
}
</style>
